<template>
  <el-aside>
    <el-aside>
      <el-menu
          router
          unique-opened
          :default-active="activePath"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse-transition="false" @select="getpath">
        <el-menu-item index="/">
          <i class="el-icon-setting"></i>
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu index="1">
          <template #title>会员管理</template>
          <el-menu-item index="/user/user">会员列表</el-menu-item>
          <el-menu-item index="/user/bean">金豆信息</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>公司配置</template>
          <el-menu-item index="/sys/system">系统配置</el-menu-item>
          <el-menu-item index="/sys/link">友情管理</el-menu-item>
          <el-sub-menu index="2-3">
            <template #title>图片管理</template>
            <el-menu-item index="/sys/chart/class">图片分类</el-menu-item>
            <el-menu-item index="/sys/chart/list">图片列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2-4">
            <template #title>新闻管理</template>
            <el-menu-item index="/sys/news/class">新闻分类</el-menu-item>
            <el-menu-item index="/sys/news/list">新闻列表</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>活动管理</template>
          <el-menu-item index="/activity/temp">活动模板</el-menu-item>
          <el-menu-item index="/activity/list">活动列表</el-menu-item>
          <el-sub-menu index="3-3">
            <template #title>签到活动</template>
            <el-menu-item index="/activity/signin/sign">活动列表</el-menu-item>
            <el-menu-item index="/activity/signin/list">签到数据</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>礼品管理</template>
          <el-menu-item index="/gift/gift">礼品列表</el-menu-item>
          <el-menu-item index="/gift/exchange">礼品列表</el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-aside>
  </el-aside>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import Router from '@/router'
export default {
  setup() {
    const state = reactive({
      activePath: window.localStorage.getItem('web_path') ?? "/",
    })
    onMounted(()=>{
      setpath()
    })
    const setpath = () => {
      Router.push(state.activePath)
    }
    const getpath = (data) => {
      state.activePath = data
      window.localStorage.setItem('web_path', data)
    }
    return {
      ...toRefs(state),
      setpath,getpath
    }
  }
}

</script>

<style lang="less" scoped>
.el-menu {
  border-right: 0;
}
</style>
